<template>
  <div class="login">
    <!-- 头部标题 -->
    <van-nav-bar class="nav-main" title="登录" />
    <img src="../../assets/2.png" alt="" class="one" />
    <div class="hem">
      <div class="yid">
        <img src="../../assets/1.png" alt="" class="two" />
      </div>

      <!-- 手机号验证码输入框 -->
      <van-form @submit="onSubmit" center>
        <van-cell-group>
          <van-field
            center
            v-model="user.mobile"
            :rules="rules.mobile"
            placeholder="请输入手机号"
            class="field"
          >
            <template #left-icon>
              <i class="iconfont icon-42  mete"></i>
            </template>
          </van-field>
          <van-field
            center
            v-model="user.code"
            :rules="rules.code"
            placeholder="请输入验证码"
            class="field"
          >
            <template #left-icon>
              <i class="iconfont icon-yanzhengma mete"></i>
            </template>
            <template #button>
              <!-- size:按钮尺寸大小  type:按钮类型  round:圆形 color:自定义按钮颜色-->
              <van-button
                size="small"
                type="default"
                round
                color="#ededed"
                class="classBtn"
                native-type="button"
                >发送验证码</van-button
              >
            </template>
          </van-field>
        </van-cell-group>

        <div class="myBtn">
          <!-- 登录按钮  size:按钮尺寸大小-->
          <van-button
            type="info"
            size="large"
            :loading="isLoading"
            loading-type="spinner"
            loading-text="..."
            round
            >登录今日头条</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { loginmain } from '@/api/login.js' // 用户登录注册
import { setLocal } from '@/utils/local.js' // 方法型工具token
export default {
  data () {
    return {
      isLoading: false, // loading的加载效果
      // 用户信息
      user: {
        mobile: '18718510653', // 手机
        code: '246810' // 验证码
      },
      // 表单正则验证
      rules: {
        mobile: [
          // 验证是否为空
          { required: true, message: '请输入手机号', trigger: 'onChange' },
          {
            // 验证是否匹配正则
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '请输入正确的手机号',
            trigger: 'onChange'
          }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'onChange' },
          { pattern: /\d{6}/, message: '验证码长度为6', trigger: 'onChange' }
        ]
      }
    }
  },
  methods: {
    async onSubmit () {
      // async 用来修饰异步代码所在的函数
      // await用来修饰异步代码
      // 使用 await 修饰后的异步代码可以同步的方式来接收返回结果
      // 携带token跳转到首页
      if (this.isLoading === true) {
        // 终止代码后续执行
        return
      }
      try {
        // try可能会出错,catch已经出错的代码,error是指出报错的状态码(404)
        // 进入loading状态为true 发送请求后为false
        this.isLoading = true
        const res = await loginmain(this.user)
        this.isLoading = false

        if (this.$route.path === '/login') {
          // 正常登录： 跳转到首页
          this.$router.push('/home')
        } else {
          // 验证登录： 返回到上一个页面
          this.$router.go(-1)
        }
        // 将 token 保存到 localstorage 中
        setLocal('token', res.data.data)
      } catch (error) {
        // 将加载状态设置为 false
        this.isLoading = false
        // 提示登录失败信息
        this.$toast.fail('您输入的手机号或者验证码有误')
      }
      // 得到手机号 & 验证码
      // 将它们提交到服务器 // this.user偷懒的写法
      // const res = await loginmain({
      //   mobile: this.user.mobile,
      //   code: this.user.code
      // }).then(res => {
      //   // 接受服务器响应的数据 跳到首页
      //   console.log(res)
      //   console.log(res.data.data)
      //   setLocal('token', res.data.data.token)

      //   this.$router.push('/home')
      // })
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  position: relative;
  .one {
    width: 100%;
    height: 200px;
    margin-top: -10px;
  }
  // /deep/ 深度选择器：如果希望 scoped 中的样式影响子组件可以使用：尝试选择器
  /deep/ .nav-main {
    background-color: #3296fa;
    .van-nav-bar__title {
      color: honeydew;
    }
  }
  .classBtn {
    /deep/ .van-button__text {
      color: #676767;
    }
  }
  .mete {
    vertical-align: middle;
    color: skyblue;
    font-size: 20px;
  }
  .myBtn {
    // margin: 20px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,50%) ;
    width: 80%;
    border-radius: 50%;
  }
  .hem {
    width: 80%;
    height: 400px;
    border-radius: 15px;
    box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
  }
  .yid {
    // position: absolute;
    height: 50px;
    text-align: center;
    .two {
      width: 30px;
      height: 30px;
      margin-top: 15px;
    }
  }
  .field{
    line-height: 50px;
  }
  
}
</style>
